<template>
  <div id="category">
    <cate-header class="header"/>
    <div class="container">
      <scroll 
      class="menu" 
      :probetype="3"
      >
        <menu-list  :menuLists="messages" @menuClick="menuClick"/>
      </scroll>
      <scroll class="content" :probetype="3" ref="scroll">
        <cate-content :rightContent="rightContent"/>
      </scroll>
    </div>
  </div>
</template>

<script>
import {getCateData} from 'network/categroy'
import CateHeader from './childcoms/CateHeader'
import MenuList from './childcoms/MenuList'
import CateContent from './childcoms/CateContent'

import Scroll from 'components/common/scroll/Scroll'
import {debounce} from 'common/utils'
export default {
  name:'Category',
  components:{
    Scroll,
    CateHeader,
    MenuList,
    CateContent
  },
  data(){
    return{
      messages:[],
      rightContent:[],
      
    }
  },
  created(){
    // 2.获取本地存储的数据
    const Cates = JSON.parse(localStorage.getItem('cates'))
    if(!Cates){
      // 没有本地的数据，则发送请求获取数据
      this.getCateData()
    }else{
      // 有本地数据
      this.messages = Cates
      this.rightContent = this.messages[0].children
    }
  }, 
  mounted(){
    const refresh = debounce(this.$refs.scroll.refresh,20)
    this.$bus.$on('pageImageLoad',() => {
      refresh()
    })
  },
  methods:{
    getCateData(){
      getCateData().then(res => {
        this.messages = res.data.message
        this.rightContent = this.messages[0].children

        // 1.把获取的接口数据存储到本地
        const parsedCates = JSON.stringify(this.messages)
        localStorage.setItem('cates',parsedCates)
      })
    },
    menuClick(index){
      this.rightContent = this.messages[index].children
      this.$refs.scroll.scrollTo(0,0,0)
    }
  }

}
</script>

<style scoped>
#category{
  height:calc(100vh - 44px);
  position: relative;
}
#category .header{
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  z-index: 9;
  width: 100%;
}
.container{
  display: flex;
  position: absolute;
  top:44px;
  bottom: 0;
  left:0;
  right: 0;
}
.container .menu{
  flex:2;

}
.container .content{
  flex:5;
  
}
</style>